<template>
    <div>
        <NavBar>
            <template #title>
                <h4>{{title}}</h4>
            </template>
            <template #left>
                <Icon name="arrow-left" size="20px" color="#2d2d2d" @click="back">
                </Icon>
            </template>
            <template #right>
                <Icon name="ellipsis" size="23px" color="#191919" @click="goToDetail">
                </Icon>
            </template>
        </NavBar>
        <router-view />
        <ActionSheet v-model:show="showAction" :actions="actions" @select="onQuit" cancel-text="取消"
            close-on-click-action>
        </ActionSheet>
        <Popup v-model:show="showPopup" closeable style="width: 80%;">
            <div style="padding: 10px;">
                <h3 class="h3-box">修改昵称</h3>
                <Form>
                    <Field v-model="nickname" label="修改群昵称" label-class="label-title" type="text" maxlength="10"
                        placeholder="请输入新昵称" show-word-limit :rules="[{ required: true, message: '昵称不能为空' }]" />
                    <div style="margin: 16px;">
                        <Button round block type="primary" @click="sumbitReset" size="small">
                            确 认
                        </Button>
                    </div>
                </Form>
            </div>
        </Popup>
    </div>
</template>

<script setup>
import { NavBar, Icon, ActionSheet, Dialog ,Popup,Form,Field,Button} from 'vant';
import { RouterView } from 'vue-router';
import router from '@/router';
import { ref, onMounted, nextTick } from 'vue';
import { Local } from '@/utils/storage';
import { quitGroup,resetNickname} from '@/v-api/addressbook/group';
const groupInfo = ref({});
const title = ref('');
const showAction = ref(false);
const showPopup = ref(false);
const nickname=ref(Local.get('nickname'))
const actions = [
    { name: '退出群聊', color: '#ee0a24' },
    { name: '修改昵称', color: 'black' }
];
onMounted(() => {
    groupInfo.value = Local.get('chatInfo');
    const str = groupInfo.value.groupName + '(' + groupInfo.value.number + ')';
    title.value = str;
});
const sumbitReset = () => {
    showPopup.value = false;
    resetNickname(groupInfo.value.id,nickname.value);
    Local.set('nickname',nickname.value);
};
const onQuit = (item) => {
    if (item.name === '退出群聊') {
        Dialog.confirm({
            message: '确定要退出群聊？',
            showCancelButton: true,
            cancelButtonText: '取消',
        }).then(() => {
            quitGroup(groupInfo.value.id);
            Local.remove('chatInfo');
            Local.remove('groupId');
        });
    }
    else if (item.name === '修改群昵称') {
        showPopup.value = true;
    }
};

const back = () => {
    history.back();
};

const goToDetail = () => {
    if (router.currentRoute.value.name === 'group-detail') {
        showAction.value = true;
    }
    setTimeout(() => {
        router.push({ name: 'group-detail' });
    }, 500);
    Local.set('groupId', groupInfo.value.id);
};
</script>

<style scoped>
.back-icon {
    color: #2d2d2d;
}

.clo {
    color: #191919;
}

.h3-box {
    font-size: 15px;
    color: #000;
    margin-left: 2.5rem;
}

.label-title {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #dbf5d2;
    color: #3ed607;
    font-weight: bold;
    font-size: 13px;
}
</style>
